<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.HashMap"%>
<%@ page import="java.util.Map"%>
<%@ page import="com.augmentum.login.Constants"%>
<%@ page import="com.augmentum.login.util.Prop"%>
<!DOCTYPE html>
<html>
  <head>
    <% 
       String path = Prop.get(Constants.STATIC_PATH);
       HttpSession validateSession=request.getSession();
       Object exception = validateSession.getAttribute(Constants.EXCEPTION);
       String exceptionUserName = "";
       String exceptionPassword = "";
       String error = "";
       String showStyle = "";

       if(exception instanceof Map) {
           Map<String, String> map = (Map<String, String>) exception;
           exceptionUserName = map.get("userName") == null ? "" : map.get("userName");
           exceptionPassword = map.get("password") == null ? "" : map.get("password");
       } else if (exception instanceof String) {
           error = (String)exception == null ? "" : (String)exception;
       }
       if(error.equals("")) {
           showStyle = "display: none;";
       }
       String userName = (String)validateSession.getAttribute(Constants.USER_NAME);
       String password = (String)validateSession.getAttribute(Constants.PASSWORD);
    %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Login</title>
    <link href="<%= path%>/css/common.css" rel="stylesheet" type="text/css">
    <link href="<%= path%>/css/login.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="<%= path%>/js/common.js"></script>
    <script type="text/javascript" src="<%= path%>/js/regular.js"></script>
    <script type="text/javascript" src="<%= path%>/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){ 
        $("input[name='password']").keydown(function(e){ 
        var curkey = e.which; 
        if(curkey == 13) {
            login();
            }
        });
    });
    </script>
  </head>
  <body>
    <div class="top common-div"></div>
    <div class="center common-div">
      <div class="common left">
        <div class="common left-child01"></div>
        <div class="common left-child02">
          <div class="common" style="height:120px">
            <img class="margin-top:15px" src="<%= path%>/images/OES_Web_Slice/LOGO_Web_Login_90x180.png" />
          </div>
          <div>
            <div style="height:40px">
              <label class="font-style01 color-style01">Online Exam Web System</label>
            </div>
            <div style="height:90px"></div>
          </div>
        </div>
      </div>
      <div class="common right">
        <div class="common right-top">
          <div class="common" style="height:35px">
            <label class="font-style02 color-style01 common">Welcome to login!</label>
          </div>
        </div>
        <div class="common right-center">
          <div class="common" style="width:100%;height:30px;"></div>
          <div class="common" style="width:100%;font-size:9pt;color:red;text-align:center;height:15px">
             <span id="messageId" <%=showStyle%>>
               <% out.write(error);
                   validateSession.removeAttribute(Constants.EXCEPTION);
                   validateSession.removeAttribute(Constants.USER_NAME);
                   validateSession.removeAttribute(Constants.PASSWORD);
               %>
             </span>
          </div>
          <form id="inForm" name="inForm" action="login" method="post">
            <div class="common right-center-child">
              <span class="input-div">
                <img class="block common float-left" style="margin:5px;" src="<%= path%>/images/ICN_Usename_20x20.png" />
                <input class="common block float-left" style="height:100%;width:88%" placeholder="UserName" type="text" 
                name="userName" value="<%= userName == null ? "" : userName%>" id="userName"/>
              </span>
              <span class="msgLabel common block float-left">&nbsp;<%= exceptionUserName%></span>
            </div>
            <div class="common right-center-child">
              <span style="float:left" class="input-div float-left">
                <img class="block common float-left" style="margin:5px;" src="<%= path%>/images/ICN_Password_20x15.png" />
                <input class="common block float-left" placeholder="Password" style="height:100%;width:90%" type="password" 
                name="password" value="<%= password == null ? "" : password%>" id="password"/>
                <input name="go" type="hidden" value="<%=request.getParameter("go") == null ? "" : request.getParameter("go")%>" />
                <input name="queryStr" id="queryStr" type="hidden" value="<%= request.getParameter("queryStr") == null ? "" : request.getParameter("queryStr")%>" />
              </span>
              <span class="msgLabel common block float-left">&nbsp;<%= exceptionPassword%></span>
            </div>
            <div class="right-center-child">
              <span style="background:orange;" class="input-div font-style02 color-style02"  onclick="login()">
                <a class="astyle" href="javascript:">Login</a>
              </span>
            </div>
            </form>
            <div class="right-center-child">
              <span class="font-style03 color-style03 block">
                <input style="float:left;cursor:point" type="checkbox" />&nbsp;<a class="astyle" href="javascript:">Remember me</a>
                <span style="float:right"><a class="astyle" href="javascript:">Forget password?</a></span>
              </span>
            </div>
          <div class="common" style="width:100%;height:50px"></div>
        </div>
        <div class="right-foot"></div>
      </div>
    </div>
    <div class="common-div" style="clean:both;"></div>
    <hr />
    <div class="foot common-div"></div>
  </body>
  <script type="text/javascript">
    document.getElementById("queryStr").value = location.hash;
  </script>
</html>